@import "../common/functions.scss";
$fs: pxToRem(28px) pxToRem(24px) pxToRem(30px);
%fb{font-weight: bold;}
$cfff: #ffffff;
$red:#B22222;
$bgc:#EEEEEE;
$ccc:#CCCCCC;
.head{
	padding: pxToRem(25px) pxToRem(30px);
	.goodImg{
		display: inline-block;
		width: pxToRem(120px);
		border: 1px solid $ccc;
		margin-right: pxToRem(30px);
	}
	.goodInfo{
		padding: pxToRem(25px);
		p{
			font-size: nth($fs,1);
		}
		p:first-child{
			margin-bottom: pxToRem(15px);
		}
		span{
			margin-left: pxToRem(17px);
		}
	}
}
.cross{
	border-top: 1px solid $ccc;
	border-bottom: 1px solid $ccc;
	height: pxToRem(20px);
	background: $bgc;
}
.order_container{
	padding: 0 pxToRem(40px);
	ul.flex_1{
		padding-left: pxToRem(40px);
		margin: pxToRem(55px) 0;
	}
	.line{
		padding-bottom: pxToRem(75px);
		line-height: 1;
		position: relative;
		label{
			display: block;
			font-size: nth($fs,1);
			margin-bottom: pxToRem(20px);
		}
		.time{
			font-size: nth($fs,2);
		}
		&:before{
			content: "";
			position: absolute;
			width: pxToRem(20px);
			height: pxToRem(20px);
			border-radius: 50%;
			background: $ccc;
			left: -.66rem;
		}
		&:after{
			width: 2px;
			background: $ccc;
			height: 100%;
			position: absolute;
			content: "";
			left: -.554rem;
			top: 0;
		}
	}
	.last{
		&:after{
			width: 0px;
		}
	}
	.active{
		label,
		.time{
			color: $red;
		}
		&:before{
			width: pxToRem(23px);
			height: pxToRem(23px);
			border: pxToRem(4px) solid $red;
			background: $cfff;
			left: -.69rem;
			z-index: 1;
		}
	}
}
.no_order{
	text-align: center;
	display: none;
	.no_orderIcon{
		display: inline-block;
		width: pxToRem(180px);
		height: pxToRem(108px);
		background: url(../../img/noOrder.png) no-repeat;
		margin: pxToRem(110px) 0 pxToRem(35px);
		background-size: 100%;
	}
	p{
		color: #999999;
		font-size: nth($fs,3);

	}
}